<template>
  <div style="width: 100vw; min-height: 100vh; padding: 88px 0 24px; background: rgba(244, 246, 250, 1)">
    <div
      style="
        width: 100%;
        height: 64px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        padding: 0 24px;
        background: rgba(42, 46, 63, 1);
      "
    >
      <img src="./images/logo.png" style="width: 88px; height: 19px" />
    </div>
    <div style="width: 1100px; margin: 0 auto">
      <div style="display: flex; align-items: center">
        <img src="./images/banner1.jpg" style="width: 748px; height: 280px; cursor: pointer" @click="onBanner1" />
        <div style="margin-left: 24px">
          <img src="./images/banner2.png" style="width: 328px; height: 128px; margin-bottom: 24px; cursor: pointer" @click="onBanner2" />
          <img src="./images/banner3.png" style="width: 328px; height: 128px; cursor: pointer" @click="onBanner3" />
        </div>
      </div>
      <div style="margin-top: 24px">
        <div style="display: flex; align-items: center; margin-bottom: 24px">
          <img src="./images/icon.png" style="width: 24px; height: 24px; margin-right: 8px" />
          <span style="line-height: 24px; font-size: 18px; font-weight: 500; color: rgba(60, 61, 67, 1)">金融衍生服务</span>
        </div>
        <div style="display: flex; align-items: center; justify-content: space-between">
          <img src="./images/shangbao.png" style="width: 257px; height: 120px; cursor: pointer" @click="onShangbao" />
          <img src="./images/xinzidianfu.png" style="width: 257px; height: 120px; cursor: pointer" @click="onXinzidianfu" />
          <img src="./images/gongyinglianjinrong.png" style="width: 257px; height: 120px; cursor: pointer" @click="onGongyinglianjinrong" />
          <img src="./images/fulicaigou.png" style="width: 257px; height: 120px; cursor: pointer" @click="onFulicaigou" />
        </div>
      </div>
      <div style="margin-top: 24px; display: flex; align-items: center">
        <div style="padding: 24px; background: #fff; border-radius: 8px; width: 600px; height: 248px; margin-right: 24px">
          <div style="display: flex; align-items: center; margin-bottom: 24px">
            <img src="./images/icon.png" style="width: 24px; height: 24px; margin-right: 8px" />
            <span style="line-height: 24px; font-size: 18px; font-weight: 500; color: rgba(60, 61, 67, 1)">人力资源业务服务</span>
          </div>
          <div style="display: flex; align-items: center; justify-content: space-between">
            <img src="./images/zhaopin.png" style="width: 120px; height: 158px; cursor: pointer" @click="onZhaopin" />
            <img src="./images/dianzihetong.png" style="width: 120px; height: 158px; cursor: pointer" @click="onDianzihetong" />
            <img src="./images/dianzidangan.png" style="width: 120px; height: 158px; cursor: pointer" @click="onDianzidangan" />
            <img src="./images/geshui.png" style="width: 120px; height: 158px; cursor: pointer" @click="onGeshui" />
          </div>
        </div>
        <div style="padding-top: 24px; background: #fff; border-radius: 8px; width: 476px; height: 248px">
          <div style="display: flex; align-items: center; padding-left: 24px">
            <img src="./images/icon.png" style="width: 24px; height: 24px; margin-right: 8px" />
            <span style="line-height: 24px; font-size: 18px; font-weight: 500; color: rgba(60, 61, 67, 1)">内部解析服务</span>
          </div>
          <div style="display: flex; align-items: center; justify-content: space-between">
            <div
              style="
                display: flex;
                flex-direction: column;
                justify-content: center;
                width: 191px;
                height: 194px;
                padding-top: 24px;
                padding-left: 24px;
              "
            >
              <div style="font-size: 18px; line-height: 18px; font-weight: 500; color: rgba(60, 61, 67, 1); margin-bottom: 16px">
                管理指挥站
              </div>
              <div style="font-size: 14px; line-height: 14px; color: rgba(166, 168, 180, 1); margin-bottom: 16px">
                企业内部人效，成本计算
              </div>
              <img src="./images/btn.png" style="width: 117px; height: 32px; cursor: pointer" @click="onZhihuizhan" />
            </div>
            <img src="./images/zhihuizhan.jpg" style="width: 285px; height: 194px" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters } from "vuex";
import { getToken } from "xqjr-module-auth/utils";
export default {
  name: "",
  components: {},
  mixins: [],
  props: {},
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["permissions_menu"]),
    ...mapState(["auth"]),
    permissionStringList() {
      return this.auth.permissions && this.auth.permissions.permissionStringList ? this.auth.permissions.permissionStringList : [];
    },
    menuUrls() {
      if (this.permissions_menu && this.permissions_menu.length > 0) {
        return this.permissions_menu.map((item) => item.url);
      }
      return [];
    },
    token() {
      return getToken();
    }
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    onBanner1() {},
    onBanner2() {},
    onBanner3() {},
    onShangbao() {
      if (this.token) {
        if (this.$hasPermissionFirst("insuranceAddService")) {
          sessionStorage.setItem("shangbaoPageState", "customer");
          this.$router.push({ path: "/shangyebaoxian" });
        } else {
          this.$message.info("没有权限访问该功能...");
        }
      } else {
        this.$router.push({ path: "/shangyebaoxian" });
      }
    },
    onXinzidianfu() {
      this.$message.info("功能正在开发中...");
    },
    onGongyinglianjinrong() {
      this.$message.info("功能正在开发中...");
    },
    onFulicaigou() {
      this.$message.info("功能正在开发中...");
    },
    onZhaopin() {
      if (this.token) {
        if (this.$hasPermission("recruitment:roverview:query")) {
          this.$router.push({ path: "/recruitment/overview" });
        } else if (this.$hasPermission("recruitment:management:query")) {
          this.$router.push({ path: "/recruitment/management" });
        } else if (this.$hasPermission("recruitment:people:query")) {
          this.$router.push({ path: "/recruitment/people" });
        } else if (this.$hasPermission("recruitment:economic:query")) {
          this.$router.push({ path: "/recruitment/economic" });
        } else if (this.$hasPermission("recruitment:rpush:query")) {
          this.$router.push({ path: "/recruitment/push" });
        } else if (this.$hasPermission("recruitment:laborUnit:query")) {
          this.$router.push({ path: "/recruitment/laborUnit" });
        } else if (this.$hasPermission("recruitment:talent:query")) {
          this.$router.push({ path: "/recruitment/talent" });
        } else if (this.$hasPermission("recruitment:zhinengtuijian:query")) {
          this.$router.push({ path: "/recruitment/talentZhineng" });
        } else {
          this.$message.info("没有权限访问该功能...");
        }
      } else {
        this.$router.push({ path: "/recruitment/overview" });
      }
    },
    onDianzihetong() {
      if (this.token) {
        if (this.menuUrls.includes("/contract/elecontract")) {
          this.$router.push({ path: "/contract/elecontract" });
        } else if (this.menuUrls.includes("/contract/type")) {
          this.$router.push({ path: "/contract/type" });
        } else if (this.menuUrls.includes("/contract/stamp")) {
          this.$router.push({ path: "/contract/stamp" });
        } else {
          this.$message.info("没有权限访问该功能...");
        }
      } else {
        this.$router.push({ path: "/contract/elecontract" });
      }
    },
    onDianzidangan() {
      if (this.token) {
        if (this.menuUrls.includes("/staff/employee")) {
          this.$router.push({ path: "/staff/employee" });
        } else if (this.menuUrls.includes("/staff/manger")) {
          this.$router.push({ path: "/staff/manger" });
        } else if (this.menuUrls.includes("/staff/edit")) {
          this.$router.push({ path: "/staff/edit" });
        } else {
          this.$message.info("没有权限访问该功能...");
        }
      } else {
        this.$router.push({ path: "/staff/employee" });
      }
    },
    onGeshui() {
      if (this.token) {
        if (this.$hasPermissionSecond("zhinengsuanshui:koujiaoyiwurenguanli")) {
          this.$router.push({ path: "/taxCalculate/management" });
        } else if (this.$hasPermissionSecond("zhinengsuanshui:baoshuirenyuanku")) {
          this.$router.push({ path: "/taxCalculate/people" });
        } else if (this.$hasPermissionSecond("zhinengsuanshui:renyuanbaosong.daibaosong")) {
          this.$router.push({ path: "/taxCalculate/waiting" });
        } else if (this.$hasPermissionSecond("zhinengsuanshui:renyuanbaosong.yibaosong")) {
          this.$router.push({ path: "/taxCalculate/report" });
        } else if (this.$hasPermissionSecond("zhinengsuanshui:renyuanbaosong.tingzhibaosong")) {
          this.$router.push({ path: "/taxCalculate/stop" });
        } else if (this.$hasPermissionSecond("hinengsuanshui:geshuijisuan")) {
          this.$router.push({ path: "/taxCalculate/calculate" });
        } else {
          this.$message.info("没有权限访问该功能...");
        }
      } else {
        this.$router.push({ path: "/taxCalculate/management" });
      }
    },
    onZhihuizhan() {
      this.$message.info("功能正在开发中...");
    }
  }
};
</script>
